<template>
  <div>
    <!--demo1-->
    <vm-counter :number="number1"></vm-counter>
    <vm-counter :number="number1" :fix-count="5"></vm-counter>
    <vm-counter :number="number2" :fix-count="10" :speed="1000" :delay-each="100"></vm-counter>
    <vm-counter :number="number2" :fix-count="10" fix-str="-" :speed="1000" :delay-each="100"></vm-counter>
    <!---->
    <vm-counter :number="number1" height="50">
      <template slot-scope="{number}">
        <span style="display: inline-block; background: #999; width: 50px; height: 50px; line-height: 50px; color: #f00; font-size: 30px">{{number}}</span>
      </template>
    </vm-counter>
  </div>
</template>

<script>
  import '@/vmui/counter'
  export default {
    data () {
      return {
        number1: 15,
        number2: 888
      }
    },
    mounted () {
      setInterval(() => {
        let val = -1 // parseInt(Math.random() + 0.5) * 2 - 1
        this.number1 += val
      }, 1000)

      setInterval(() => {
        this.number2 += parseInt(Math.random() * 500 - 250)
      }, 3000)
    }
  }
</script>
